<template>
	<view>
		<view class="comments">
			<!-- 顶部 -->
			<view class="top">
				<view class="flex-align">
					<view class="menu" @click="ownerAll(0)">
						<text class="huifu" :class="{'active-menu':formData.eid==0}">回复{{detail.replyNum}}</text>
						<view class="underline" v-if="formData.eid==0"></view>
					</view>
					<view class="menu" @click="ownerAll(1)">
						<text class="huifu" :class="{'active-menu':formData.eid==1}">只看楼主</text>
						<view class="underline" v-if="formData.eid==1"></view>
					</view>
				</view>
				<view class="options">
					<view class="options-item" :class="{'active-options-item':formData.sortType==0}"
						@click="onChangeSort(0)">
						最早</view>
					<view class="options-item" :class="{'active-options-item':formData.sortType==1}"
						@click="onChangeSort(1)">
						最新</view>
					<view class="options-item" :class="{'active-options-item':formData.sortType==2}"
						@click="onChangeSort(2)">
						最热</view>
				</view>
			</view>
			<!-- 内容 -->
			<scroll-view @scrolltolower="bindscrolltolower" :lower-threshold="50" :scroll-y="true"
				style="max-height: calc(100vh - 350rpx);padding-bottom: 100rpx;height:auto">
				<view class="comments-item flex" v-for="(item,index) in list" :key="index">
					<image :src="item.appIcon" class="comments-item-head-img"></image>
					<view class="comments-item-content">
						<view class="comments-user-info">
							<text class="user-name">{{item.commentName}}</text>
							<!-- <view class="original-poster">楼主</view>
		        <view class="user-level active-state">v5</view> -->
						</view>
						<view class="comments-content">{{item.content}}</view>
						<view v-for="(sub,idx) in item.listForumAccessoryVo" :key="idx">
							<image :src="sub.url" class="comment-img"></image>
						</view>

						<view class="flex-space">
							<view class="floor">{{index+1}}楼 {{item.dateDiff}}</view>
							<view class="flex-align mes-box">
								<image src="../../static/image/page/mes-img.png" class="mes-img"
									@click="secondaryComments" :data-index="index" :data-item="item"></image>
								<view class="flex-align " @click="level2LikeOrCancel" :data-id="item.id"
									:data-index="index">
									<image v-if="item.isPraise" src="../../static/image/page/active-dz.png"
										class="dianz-icon">
									</image>
									<image v-else src="../../static/image/page/dianz-icon.png" class="dianz-icon">
									</image>
									<text class="dz-num"
										:class="{'active-dz-num':item.isPraise}">{{item.praiseNum}}</text>
								</view>
							</view>
						</view>
						<view class="more" v-if="item.remnant>0" @click="viewMore" :data-item="item"
							:data-index="index">
							有{{item.remnant}}条回复</view>
					</view>
				</view>
				<!-- 没有更多数据 -->
				<view class="noCom" v-if="list.length<=0">
					<image class="img" src="../../static/image/page/noCom.png" mode="aspectFit"></image>
					<view>暂无评论</view>
				</view>
				<!-- <no-data wx:if="{{isComplete}}"></no-data> -->
			</scroll-view>
		</view>
		<!-- 评论框 -->
		<view class="comment-input flex-align">
			<view class="input-box">
				<image src="../../static/image/page/write-icon.png" class="write-icon" mode=""></image>
				<input @click="onShowInput" :disabled="true" class="input-item" type="text"
					placeholder="说说你的想法"></input>
			</view>
			<view class="flex-align">
				<view class="mes-box">
					<image src="../../static/image/page/mes-img.png" class="mes-img"></image>
					<text class="mes-num">{{detail.replyNum}}</text>
				</view>
				<view class="dz-box" @click="giveThumbsUp">
					<image v-if="detail.isPraise" src="../../static/image/page/active-dz.png" class="dianzan-icon">
					</image>
					<image v-else src="../../static/image/page/dianz-icon.png" class="dianzan-icon"></image>
					<text class="dianzan-num">{{detail.praiseNum}}</text>
				</view>
			</view>
		</view>
		<!-- 评论弹层 -->
		<view class="layer-box" @click="onHiddeInput" v-if="isShowInput">
			<view class="layer" @click.stop="()=>{}">
				<!-- 图片 -->
				<view class="img-box flex-align" v-if="tempFilePaths.length">
					<view class="img-item" v-for="(item,index) in tempFilePaths" :key="index">
						<image :src="item" class="tupian"></image>
						<image @click="delImg" :data-index="index" src="../../static/image/page/close-icon.png"
							class="close-icon"></image>
					</view>
				</view>
				<!-- 输入框 -->
				<view class="text-input">
					<textarea @input="bindinput" class="textarea-box" name="" id="" placeholder="说说你的想法"
						:fixed="true"></textarea>
					<view class="operation">
						<image @click="chooseImage" src="../../static/image/page/img-icon.png" class="img-icon"></image>
						<text class="send-text" @click="send">发送</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 二级评论弹层 -->
		<view class="layer-box secondary-comments-layer" @click="close" v-if="isShowMore">
			<view class="secondary-comments" @click.stop="()=>{}">
				<view class="head flex-align ">
					<image @click="close" src="../../static/image/page/back-arrow.png" class="back-arrow"></image>
					<text class="head-text">回复({{currentComments.remnant}})</text>
				</view>
				<view class="secondary-comments-item">
					<!-- 一级评论 -->
					<view class="level-1-comment">
						<view class="comments-item flex none-border">
							<image :src="currentComments.appIcon" class="comments-item-head-img"></image>
							<view class="comments-item-content">
								<view class="comments-user-info">
									<text class="user-name"> {{currentComments.commentName}}</text>
									<!-- <view class="original-poster">楼主</view>
			            <view class="user-level active-state">v5</view> -->
								</view>
								<view class="comments-content">{{currentComments.content}}</view>
								<view v-for="(item,index) in currentComments.listForumAccessoryVo" :key="index">
									<image :src="item.url" class="comment-img"></image>
								</view>
								<view class="flex-space">
									<view class="floor">{{currentIndex+1}}楼 {{currentComments.dateDiff}}</view>
									<view class="flex-align mes-box">
										<image src="../../static/image/page/mes-img.png" @click="secondaryComments"
											:data-item="currentComments" :data-index="currentIndex" class="mes-img">
										</image>
										<view class="flex-align" @click="layerLikeOrCancel"
											:data-id="currentComments.id" :data-currentIndex="currentIndex">
											<image v-if="currentComments.isPraise"
												src="../../static/image/page/active-dz.png" class="dianz-icon">
											</image>
											<image v-else src="../../static/image/page/dianz-icon.png"
												class="dianz-icon">
											</image>
											<text class="dz-num"
												:class="{'active-dz-num':currentComments.isPraise}">{{currentComments.praiseNum}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<!-- 回复 -->
					<view class="secondary-reply">
						<view class="all-hufu">全部回复</view>
						<view class="comments-item flex none-border"
							v-for="(item,index) in currentComments.listForumCommentPageVo" :key="index">
							<image :src="item.appIcon" class="comments-item-head-img"></image>
							<view class="comments-item-content">
								<view class="comments-user-info">
									<text class="user-name">{{item.commentName}}</text>
									<!-- <view class="original-poster">楼主</view>
			            <view class="user-level active-state">v5</view> -->
								</view>
								<view class="comments-content">
									<text>{{item.content}}</text>
									<view v-for="(sub,idx) in item.listForumAccessoryVo" :key="idx">
										<image :src="sub.url" class="comment-img"></image>
									</view>
									<!-- 三级评论 -->
									<view class="third-level-comments-box" v-if="item.listForumCommentPageVo.length">
										<view v-for="(sub,idx) in item.listForumCommentPageVo" :key="idx">
											<view class="third-level-comments-item" v-if="!sub.replyName"
												@click="secondaryComments" :data-subContent="item" :data-index="index"
												:data-commentId="sub.commentId">
												<text class="huifushangji">{{sub.commentName}}：</text>{{sub.content}}
												<view v-for="(subItem,subIdx) in sub.listForumAccessoryVo">
													<image :src="subItem.url" class="comment-img"></image>
												</view>
											</view>
											<view class="third-level-comments-item" v-else @click="secondaryComments"
												:data-subContent="item" :data-index="index"
												:data-commentId="sub.commentId">
												<text class="huifushangji">{{sub.commentName}}</text>回复<text
													class="huifushangji">{{sub.replyName}}：</text>{{sub.content}}
												<view v-for="(subItem,subIdx) in sub.listForumAccessoryVo"
													:key="subIdx">
													<image :src="subItem.url" class="comment-img"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="flex-space">
									<view class="floor">{{item.dateDiff}}</view>
									<view class="flex-align mes-box">
										<image src="../../static/image/page/mes-img.png" @click="secondaryComments"
											:data-subContent="item" :data-index="index" class="mes-img"></image>
										<view class="flex-align" @click="layerLikeOrCancel" :data-id="item.id"
											:data-index="index">
											<image v-if="item.isPraise" src="../../static/image/page/active-dz.png"
												class="dianz-icon"></image>
											<image v-else src="../../static/image/page/dianz-icon.png"
												class="dianz-icon">
											</image>
											<text class="dz-num"
												:class="{'active-dz-num':item.isPraise}">{{item.praiseNum}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>






		</view>
	</view>
</template>

<script>
	// import api from '../../api/index';

	import {
		uploadFileTest
	} from '../../common/util.js'
	export default {
		name: "comment",
		props: {
			detail: Object,
			type: Number
		},
		data() {
			return {
				list: [],
				isLoading: false,
				isComplete: false,
				isShowMore: false, //是否展示更多评论
				currentIndex: '', //当前钱评论下标
				formData: {
					forumId: '', //帖子id
					eid: 0, //是否限制楼主>0限制
					pid: 0, //父id,默认0
					sortId: 0, //排序限制 id
					sortType: 1, //排序类型 0最早默认(id正序), 1最新(id倒序,需要限制id), 2最热(评论数倒序)
					pageNo: 1,
					type: 0, //类型，0赚钱社区1经纪人学院
				},
				isShowInput: false, //是否显示输入框
				tempFilePaths: [],
				value: '', //输入的内容
				currentComments: {}, //当前级评论信息/一级评论内容
				currentIndex: '', //当前评论下标/一级评论下标
				subComments: {}, //二级级内容/弹层评论内容
				subIndex: -1, //二级下标/弹层评论下标
				level3CommentsId: '', //三级评论id
			}
		},
		mounted() {
			this.formData.forumId = this.detail.id;
			this.formData.type = this.type;
			this.getList();
		},
		methods: {
			//切换排序状态
			onChangeSort(type) {
				this.formData.sortType = type;
				this.formData.pageNo = 1;
				this.list = []
				this.isLoading = false;

				this.getList();
			},
			//二级评论
			secondaryComments(e) {
				let data = e.currentTarget.dataset;
				console.log(data)
				if ( data.subcontent) {
					console.log(5555555)
					//三级评论
					this.subComments = data.subcontent;
					this.subIndex = data.index;
					this.isShowInput = true;
					this.level3CommentsId = data.commentid;

				} else {
					console.log(544444)
					//二级评论
					this.currentComments = data.item;
					console.log(data.item)
					this.currentIndex = data.index;
					this.isShowInput = true;
				}
				console.log(this.isShowInput)
			},
			//上传图片
			//使用同步上传

			async uploadImg(urls) {
				let arrUrl = [];
				for (let index = 0; index < urls.length; index++) {
					let ossRes = await this.$api.getOssAuth({
						dir: 'COMMENT_DIR'
					});
					let credentials = ossRes.data.data;
					let url = urls[index];
					let arr = url.split('.'); //截取后缀
					let suffix = arr[arr.length - 1];
					// console.log(suffix)
					console.log()
					let rt = await uploadFileTest(url, credentials, suffix)
					if (rt) {
						arrUrl.push(rt)
					}
				}
				return arrUrl
			},
			//发送
			async send() {

				let subPid = this.subComments.id;
				console.log(this.subComments)
				let pid = this.currentComments.id;
				//是否图片评论
				if (this.tempFilePaths.length) {
					let url = await this.uploadImg(this.tempFilePaths)
					url = url.join(',');
					console.log(url);
					let data = {
						"pid": subPid ? subPid : pid, //父级评论id
						"fid": this.detail.id, //帖子id
						"type": this.type, //评论类型
						"content": this.value, //评论内容
						url,
						replyId: this.level3CommentsId,
					}
					//图片加文字
					this.$api.addComment(data).then(res => {
						uni.showToast({
							title: res.data.message,
						})

						this.isShowInput = false;

						// 	if (this.currentComments.id) {
						// 		//二级评论
						// 		let arr = this.list;
						// 		let index = this.currentIndex;
						// 		arr[this.currentIndex].remnant = ++arr[this.currentIndex].remnant;
						// 		let currentComments = this.currentComments; //当前评论
						// 		//是否展开二级评论弹层
						// 		if (this.isShowMore) {
						// 			if (this.subIndex >= 0) { //是否点击二级评论
						// 				console.log('回复二级评论')
						// 				arr[index].listForumCommentPageVo[this.subIndex]
						// 					.listForumCommentPageVo.unshift(res.data.data);
						// 				currentComments.listForumCommentPageVo[this.subIndex]
						// 					.listForumCommentPageVo.unshift(res.data.data);
						// 				//三级评论
						// 				this.list = list;
						// 				this.isShowInput = false;
						// 				this.value = '';
						// 				this.currentComments = currentComments;
						// 				this.tempFilePaths = [];
						// 				this.subComments = {};
						// 				this.subIndex = -1;


						// 			} else {
						// 				arr[index].listForumCommentPageVo.unshift(res.data.data);
						// 				currentComments.listForumCommentPageVo.unshift(res.data.data);
						// 				console.log('在二级评论回复一级品论')
						// 				//二级评论
						// 				this.list = arr;
						// 				this.isShowInput = false;
						// 				this.value = '';
						// 				this.currentComments = currentComments;
						// 				this.tempFilePaths = [];
						// 				this.subComments = {};

						// 			}
						// 		} else {
						// 			arr[this.currentIndex].listForumCommentPageVo.unshift(res.data
						// 				.data);
						// 			this.list = arr;
						// 			this.isShowInput = false;
						// 			this.value = '';
						// 			this.tempFilePaths = [];

						// 		}

						// 	} else {
						// 		//一级评论
						// 		let arr = this.list;
						// 		arr.unshift(res.data.data)
						// 		this.list = arr;
						// 		this.isShowInput = false;
						// 		this.value = '';
						// 		this.tempFilePaths = [];
						// 		this.detail.replyNum = ++this.detail.replyNum

						// 	}
					})
				} else {
					let data = {
						"pid": subPid ? subPid : pid, //父级评论id
						"fid": this.detail.id, //帖子id
						"type": this.type, //评论类型
						"content": this.value, //评论内容
						replyId: this.level3CommentsId, //三级评论id
					}
					//文字
					this.$api.textReview(data).then(res => {
						uni.showToast({
							title: res.data.message,
						})

						this.isShowInput = false;
						// if (this.currentComments.id) {
						// 	//二级评论
						// 	let arr = this.list;
						// 	let index = this.currentIndex;
						// 	console.log(arr, index)
						// 	arr[index].remnant = ++arr[index].remnant;
						// 	let currentComments = this.currentComments; //当前评论
						// 	console.log('回复一级评论')
						// 	// 是否展开二级评论弹层
						// 	if (this.isShowMore) {
						// 		console.log('在二级评论直接回复一级评论')
						// 		if (this.subIndex >= 0) {
						// 			console.log('回复二级评论')
						// 			arr[index].listForumCommentPageVo[this.subIndex]
						// 				.listForumCommentPageVo.unshift(res.data.data);
						// 			currentComments.listForumCommentPageVo[this.subIndex]
						// 				.listForumCommentPageVo.unshift(res.data);
						// 			//三级评论
						// 			this.list = arr;
						// 			this.isShowInput = false;
						// 			this.value = '';
						// 			this.currentComments = currentComments;
						// 			this.subIndex = -1;
						// 			this.subComments = {};
						// 		} else {
						// 			arr[index].listForumCommentPageVo.unshift(res.data.data);
						// 			currentComments.listForumCommentPageVo.unshift(res.data.data);
						// 			console.log('在二级评论回复一级品论')
						// 			//二级评论
						// 			this.list = arr;
						// 			this.isShowInput = false;
						// 			this.value = '';
						// 			this.currentComments = currentComments;
						// 			this.subComments = {};
						// 		}
						// 	} else {
						// 		console.log('直接回复一级评论')
						// 		console.log(arr[index])
						// 		//直接在一级评论回复
						// 		arr[index].listForumCommentPageVo.unshift(res.data.data);
						// 		this.list = arr;
						// 		this.isShowInput = false;
						// 		this.value = '';
						

						// 	}
						

						// } else {
						// 	//一级评论
						// 	let arr = this.list;
						// 	arr.unshift(res.data.data)
						// 	this.list = arr;
						// 	this.isShowInput = false;
						// 	this.value = '';
						// 	this.detail.replyNum = ++this.detail.replyNum

						// }
					})
				}
			},
			//输入框输入的内容
			bindinput(e) {
				this.value = e.detail.value

			},
			//移除图片
			delImg(e) {
				let index = e.currentTarget.dataset.index;
				let list = this.tempFilePaths;
				list.splice(index, 1)
				this.tempFilePaths = list;

				console.log(list);
			},
			//选择图片
			chooseImage() {
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// tempFilePath可以作为img标签的src属性显示图片
						const tempFilePaths = res.tempFilePaths
						console.log(res)
						let num = this.tempFilePaths.length + tempFilePaths.length;
						if (num > 3) {
							uni.showToast({
								icon: 'none',
								title: '最多可以上传3张',
							})
						} else {
							this.tempFilePaths = this.tempFilePaths.concat(
								tempFilePaths)

						}

					}
				})
			},
			//关闭输入框
			onHiddeInput() {

				this.isShowInput = false

			},
			//显示输入框
			onShowInput() {
				this.isShowInput = true

			},
			//触底时
			bindscrolltolower() {
				!this.isLoading && !this.isComplete && this.getList();
			},

			//关闭弹层
			close() {

				this.isShowMore = false;
				this.currentComments = {};
				this.currentIndex = '';

			},
			//看楼主获取全部
			ownerAll(type) {

				this.formData.eid = type;
				this.formData.pageNo = 1;
				this.list = [];
				this.isLoading = false;
				this.isComplete = false;
				this.getList();

			},
			//查看更多评论
			viewMore(e) {
				let item = e.currentTarget.dataset;


				this.isShowMore = true;
				this.currentComments = item.item;
				this.currentIndex = item.index;

			},
			//二级评论点赞
			layerLikeOrCancel(e) {
				let data = e.currentTarget.dataset;
				let index = this.currentIndex; //一级评论下标
				this.$api.level2LikeOrCancel(data.id).then(res => {
					let list = this.list;
					let item = [];
					console.log('列表', list)
					//判断是否点赞弹层的二级评论  有index是  
					if (data.index >= 0) {
						item = list[index].listForumCommentPageVo[data.index];
						if (item.isPraise) {
							--item.praiseNum;
						} else {
							++item.praiseNum;
						}
						item.isPraise = !item.isPraise;
						list[index].listForumCommentPageVo[data.index] = item;
						let content = this.currentComments.listForumCommentPageVo;
						content[data.index].isPraise = item.isPraise;
						content[data.index].praiseNum = item.praiseNum;

						this.list = list;
						this.currentComments.listForumCommentPageVo = content;


					} else {
						item = list[index];
						if (item.isPraise) {
							--item.praiseNum;
						} else {
							++item.praiseNum;
						}
						item.isPraise = !item.isPraise;
						list[index] = item;
						//弹层的一级评论

						this.list = list;
						this.currentComments.isPraise = item.isPraise;
						this.currentComments.praiseNum = item.praiseNum;

					}
				})
			},

			//评论点赞、取消
			level2LikeOrCancel(e) {
				let data = e.currentTarget.dataset;
				this.$api.level2LikeOrCancel(data.id).then(res => {
					let list = this.list;
					let item = list[data.index];
					if (item.isPraise) {
						--item.praiseNum;
					} else {
						++item.praiseNum;
					}
					item.isPraise = !item.isPraise;
					list[data.index] = item;
					this.list = list;
				})
			},

			//点赞/取消帖子点赞
			giveThumbsUp() {
				this.$api.likeOrCancel({
					id: this.detail.id,
					type: this.type
				}).then(() => {
					let data = this.detail;
					if (data.isPraise) {
						--data.praiseNum;
					} else {
						++data.praiseNum;
					}
					data.isPraise = !data.isPraise;
					this.detail = data;

				})
			},
			//获取评论列表
			getList() {

				this.isLoading = true

				this.$api.getCommentList(this.formData).then(res => {

					this.isLoading = false;
					this.formData.pageNo = ++this.formData.pageNo;
					this.list = this.list.concat(res.data.data.records);
					this.isComplete = !res.data.data.records.length;

				})
			},
		},
	}
</script>

<style>
	/* components/comment/index.wxss */
	.flex {
		display: flex;
	}

	.flex-align {
		display: flex;
		align-items: center;
	}

	.flex-justify {
		display: flex;
		justify-content: center;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-space {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	/* 评论 */
	.comments {
		padding: 0 30rpx 100rpx;
		height: auto;
		max-height: calc(100vh - 300rpx);
		/* overflow: auto; */
	}

	.top {
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.menu {
		margin-right: 30rpx;
	}

	.huifu {
		font-size: 30rpx;
		color: #999999;
	}

	.underline {
		width: 40rpx;
		height: 6rpx;
		background: #585CF7;
		border-radius: 3rpx;
		margin: 10rpx auto 0;
	}

	.active-menu {
		color: #333333;
	}

	.options {
		height: 54rpx;
		background: #F8F8F8;
		border-radius: 27rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rpx;
	}

	.options-item {
		width: 80rpx;
		height: 38rpx;
		font-size: 22rpx;
		color: #999999;
		text-align: center;
		line-height: 38rpx;
	}

	.active-options-item {
		background: #FFFFFF;
		border: 1rpx solid #585CF7;
		border-radius: 19rpx;
		color: #585CF7;
	}

	.content-comments {
		height: calc(100vh - 350rpx);
		overflow: auto;
		padding-bottom: 100rpx;
	}

	.comments-item {
		padding: 40rpx 0 45rpx;
		border-bottom: 1rpx solid #EEEEEE;

	}

	.comments-item-head-img {
		min-width: 80rpx;
		min-height: 80rpx;
		max-width: 80rpx;
		max-height: 80rpx;
		border-radius: 50%;
		margin-right: 22rpx;
	}

	.comments-item-content {
		flex: 1;
		max-width: 100%;
	}

	.comments-user-info {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.user-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.original-poster {
		width: 60rpx;
		height: 30rpx;
		background: #EEEEFE;
		border: 1rpx solid #585CF7;
		border-radius: 4rpx;
		font-size: 22rpx;
		color: #585CF7;
		margin-left: 11rpx;
		text-align: center;
		line-height: 27rpx;
	}

	.user-level {
		width: 60rpx;
		height: 30rpx;
		background: #DDDDDD;
		border-radius: 4rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		margin-left: 10rpx;
	}

	.active-state {
		background: #FC4073;
	}

	.comments-content {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 40rpx;
	}

	.floor {
		font-size: 22rpx;
		color: #999999;
	}

	.mes-img {
		width: 24rpx;
		height: 22rpx;
		margin-right: 55rpx;
	}

	.dianz-icon {
		width: 23rpx;
		height: 23rpx;
		margin-right: 9rpx;
	}


	.dz-num {
		font-size: 22rpx;
		color: #333333;
	}

	.active-dz-num {
		color: #FC4073;
	}

	.mes-box {
		flex: 1;
		justify-content: flex-end;
	}

	.more {
		font-size: 28rpx;
		color: #FC4073;
		margin-top: 42rpx;
	}


	/* 评论输入框 */
	.comment-input {
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 38rpx 2rpx rgba(0, 0, 0, 0.04);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 30rpx;
		z-index: 9;
	}

	.input-box {
		padding: 0 20rpx;
		display: flex;
		width: 450rpx;
		height: 68rpx;
		align-items: center;
		background: #F8F8F8;
		border-radius: 34rpx;
		margin-right: 54rpx;
	}

	.write-icon {
		width: 26rpx;
		height: 32rpx;
	}

	.input-item {
		padding: 0 0 0 20rpx !important;
		font-size: 28rpx;
	}

	.mes-box {
		position: relative;
		margin-right: 20rpx;
	}

	.mes-img {
		width: 34rpx;
		height: 30rpx;
	}

	.mes-num {
		font-size: 22rpx;
		color: #F96363;
		position: absolute;
		top: -8px;
		right: 8px;
	}

	.dz-box {
		position: relative;
		margin-right: 20rpx;
	}

	.dianzan-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.dianzan-num {
		font-size: 22rpx;
		color: #F96363;
		position: absolute;
		top: -8px;
		right: -16px;
	}





	/* 评论弹层 */
	.layer-box {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 10;
		/* touch-action: none; */
	}

	.layer {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.text-input {
		padding: 30rpx 30rpx 0;
		background-color: #fff;
	}

	.textarea-box {
		width: 100%;
		height: 150rpx;
		background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.operation {
		height: 80rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.img-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.send-text {
		font-size: 28rpx;
		color: #FC4073;
	}

	/* 图片 */
	.img-box {
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 10px 10px 0px 0px;
		border-bottom: 1rpx solid #F8F8F8;
		padding: 0 30rpx;
	}

	.tupian {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.img-item {
		position: relative;
	}

	.close-icon {
		width: 28rpx;
		height: 28rpx;
		position: absolute;
		top: -5px;
		right: 10px;
	}

	/* 二级评论详情 */
	.secondary-comments-layer {
		z-index: 8;
		touch-action: none;
	}

	.secondary-comments {
		background-color: #fff;
		border-radius: 20px 20px 0px 0px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 98rpx;
		height: 70%;
		display: flex;
		flex-direction: column;
	}

	.secondary-comments-item {
		overflow: auto;
		flex: 1;
	}



	.level-1-comment {
		padding: 0 30rpx;

	}

	.secondary-comments .head {
		margin-top: 30rpx;
		padding: 0 30rpx 30rpx;
	}

	.secondary-comments .head-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}

	.back-arrow {
		width: 15rpx;
		height: 28rpx;
		margin-right: 30rpx;
	}

	.none-border {
		border-bottom: none;
	}

	.all-hufu {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.secondary-reply {
		padding: 30rpx;

	}

	.huifushangji {
		color: #585CF7;
	}

	.comment-img {
		display: block;
		margin-bottom: 10rpx;
		max-width: 100%;
		width: auto;
	}

	/* 三级评论 */
	.third-level-comments-box {
		width: 100%;
		height: 100%;
		background: #F8F8F8;
		border-radius: 10rpx;
		padding: 30rpx 24rpx;
		margin-top: 20rpx;
	}

	.third-level-comments-item {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 20rpx;
	}

	.noCom {
		text-align: center;
		color: #999999;
		padding: 30rpx;

		.img {
			width: 408rpx;
			height: 290rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
